<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/layer.js}"></script>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

    <style>
        .share-link {
            color: skyblue;
            cursor: pointer;
            display: inline-block;
            text-decoration: underline;
        }

        .share-link:hover {
            cursor: pointer;
        }

        .share-popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 9999;
        }

        .share-popup input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
        }

        .share-popup button {
            padding: 10px 20px;
            background-color: skyblue;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 3px;
        }
    </style>
</head>
<div th:replace="client/header::header(${article.title},null)"></div>
<body>
<article class="main-content post-page">
    <div class="post-header">
        <h1 class="post-title" itemprop="name headline" th:text="${article.title}"></h1>
        <!--分享-->
        <div style="text-align: right;">
            <a class="share-link" onclick="showSharePopup()">分享</a>
        </div>

        <div class="post-data">
            <time th:datetime="${commons.dateFormat(article.created)}" itemprop="datePublished"
                  th:text="'发布于 '+ ${commons.dateFormat(article.created)}"></time>
        </div>
    </div>
    <br/>
    <div id="post-content" class="post-content content" th:utext="${commons.article(article.content)}"></div>
</article>
<div th:replace="client/comments::comments"></div>
<div th:replace="client/footer::footer"></div>
<!-- 使用layer.js实现图片缩放功能 -->
<script type="text/JavaScript">
    $('.post-content img').on('click', function () {
        var imgurl = $(this).attr('src');
        var w = this.width * 2;
        var h = this.height * 2 + 50;
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            area: [w + "px", h + "px"],
            shadeClose: true, //点击遮罩关闭
            content: '\<\div style="padding:20px;">' +
                '\<\img style="width:' + (w - 50) + 'px;" src=' + imgurl + '\>\<\/div>'
        });
    });

    function copyUrl() {
        var url = window.location.href;
        navigator.clipboard.writeText(url)
            .then(function () {
                alert("网址已复制：" + url);
            })
            .catch(function (err) {
                console.error('无法复制网址', err);
            });
    }

    // 显示分享弹出框的函数
    function showSharePopup() {
        // 创建一个 div 元素作为弹出框
        var popup = document.createElement('div');
        popup.className = 'share-popup';

        // 创建一个 input 元素，用于显示当前网页的 URL
        var input = document.createElement('input');
        input.value = window.location.href;
        popup.appendChild(input);

        // 创建一个 div 元素，用于显示二维码
        var qrcodeContainer = document.createElement('div');
        qrcodeContainer.id = 'qrcode';
        popup.appendChild(qrcodeContainer);

        // 创建一个复制按钮
        var copyButton = document.createElement('button');
        copyButton.textContent = '复制';
        copyButton.onclick = copyUrl;
        popup.appendChild(copyButton);

        var separator = document.createTextNode(' ');
        popup.appendChild(separator);

        // 创建一个按钮，用于关闭弹出框
        var closeButton = document.createElement('button');
        closeButton.textContent = '关闭';
        closeButton.onclick = closePopup;
        popup.appendChild(closeButton);

        // 定义一个函数，用于关闭弹出框
        function closePopup() {
            popup.style.display = 'none';
            popup.innerHTML = '';
        }

        // 创建一个半透明遮罩层，用于覆盖整个页面，防止用户操作页面
        var overlay = document.createElement('div');
        overlay.className = 'overlay';
        popup.appendChild(overlay);

        // 将弹出框添加到页面中
        document.body.appendChild(popup);

        // 生成当前网页的 URL 对应的二维码
        $('#qrcode').qrcode({
            text: window.location.href,
            width: 100,
            height: 100
        });
    }

    // 复制当前网页的 URL 到剪贴板的函数
    function copyUrl() {
        // 获取当前网页的 URL
        var url = window.location.href;
        // 将 URL 复制到剪贴板中
        navigator.clipboard.writeText(url)
            .then(function () {
                alert("网址已复制：" + url);
            })
            .catch(function (err) {
                console.error('无法复制网址', err);
            });
    }


</script>
</body>
</html>
